<template>
  <el-aside :width="isCollapse ? '64px' : '160px'" style="background-color: rgb(238, 241, 246)">
      <div class="toggle-button" @click="toggleCollapse">
        <i class="el-icon-orange"></i>
      </div>
    <el-menu
      
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      :collapse-transition="false"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
        <i class="el-icon-cold-drink"></i>
        <span slot="title"><a class="side-btn" href="packageManage/package_show">套餐管理</a></span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-trophy"></i>
        <span slot="title"><a class="side-btn" href="top/get?order=0">销量查看与推荐</a></span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-picture"></i>
        <span slot="title"><a class="side-btn" href="manage/getImage?page.pageSize=4&page.currentPage=1">实体图管理</a></span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-milk-tea"></i>
        <span slot="title"><a class="side-btn" href="foodManage/foodManage_show?type=1">奶茶管理</a></span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-coffee-cup"></i>
        <span slot="title" href="food-manage.html"><a class="side-btn" href="foodManage/foodManage_show?type=2">咖啡管理</a></span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-sugar"></i>
        <span slot="title" href="food-manage.html"><a class="side-btn" href="foodManage/foodManage_show?type=3">甜品管理</a></span>
      </el-menu-item>
      <el-menu-item index="7">
        <i class="el-icon-orange"></i>
        <span slot="title" href="food-manage.html"><a class="side-btn" href="foodManage/foodManage_show?type=4">蛋糕管理</a></span>
      </el-menu-item>
      <el-menu-item index="8">
        <i class="el-icon-lock"></i>
        <span slot="title"><a class="side-btn" href="modify_password.jsp">修改密码</a></span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<style>  
  .toggle-button {
    background-color: #8395a7;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: .2em;
    cursor: pointer;
  }
  .side-btn {
    text-decoration: none;
    color: #fff;
  }
</style>

<script scope>
  module.exports = {
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }
    },
  };
</script>